<template>
  <div class="home">
    <h1>文章发布</h1>
    <el-button plain @click="open1" v-if="false"> 可自动关闭 </el-button>
    <div class="hometitle">
      <p>标题 *</p>
      <el-input v-model="input" placeholder="请输入标题"></el-input>
    </div>
    <p>内容</p>
    <div id="demo1"></div>
    <el-button type="primary" plain @click.native="release">点击发布</el-button>
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";

export default {
  name: "Fu",
  data() {
    return {
      editor: null,
      editorData: "",
      input: "",
      imgUrl: "",
    };
  },
  mounted() {
    const editor = new wangEditor(`#demo1`);
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };
    // 创建编辑器
    editor.create();
    this.editor = editor;
  },
  methods: {
    open1() {
      const h = this.$createElement;
      this.$notify({
        title: "发布成功",
        message: h(
          "i",
          { style: "color: teal;text-align:center;" },
          "即将前往社区查看"
        ),
      });
    },
    release() {
      if (this.editor.txt.html().match(/"([^"]*?)"/i )!= null) {
        this.imgUrl = this.editor.txt.html().match(/"([^"]*?)"/i)[1];
      }
      if (this.input != "" && this.editor.txt.text() != "") {
        this.$axios
          .post("/api/users/releaseArticle", {
            user_id: localStorage.getItem("user_id"),
            theme_title: this.input,
            theme_content: this.editor.txt.text(),
            pic_url: this.imgUrl,
          })
          .then((res) => {
            this.open1();
          })
          .then(() => {
            setTimeout(() => {
              this.$router.push("/community");
            }, 2000);
          });
      }
    },
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

<style lang="scss">
.a {
  background-color: red;
  width: 1000px;
  height: 300px;
}
.home {
  width: 1200px;
  margin: auto;
  position: relative;
  .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    margin: 30px 0 15px;
  }
}
.home .el-button {
  position: relative;
  right: -1086px;
  top: 30px;
}
.hometitle {
  margin-bottom: 20px;
}
.home p {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 25px;
}
.home > h1 {
  text-align: center;
  margin-top: 40px;
}
</style>